<template>
	<div>
		<Row>
		   <Col span="24" style="background: #ffff;height: 30px;line-height: 30px;text-indent: 20px" > 
			  <span style="font-size:14px;font-weight:bold">上传管理 </span>         
	       </Col>
	   </Row>
       <Row style="background: #ffff;height: 50px;margin: 3px 0 3px 0;padding: 8px" type="flex" justify="space-between" class="code-row-bg">            
           <Col span="5" >
              <Input v-model="filter.value" placeholder="请输入文件名">
                  <Button slot="append" icon="ios-search" @click="search"></Button>
                </Input>  
           </Col>
            <Col span="5" >
              <Button type="ghost" icon="ios-plus-empty" @click="addListData">文件上传</Button>
              <Button type="ghost" icon="ios-minus-empty" @click="removesData" :disabled="dis">批量删除</Button>      
            </Col>
       </Row>
       <Row>
           <Col span="5">
                <Tree :data="cityList" @on-select-change="onselectchange"></Tree>
           </Col>
           <Col span="19">
              <Table border :columns="columns" :data="data" @on-selection-change="onselectionchange"></Table>
              <Page :total="filter.total" :page-size="filter.pagesize" @on-change="onpagechange" @on-page-size-change="onpagesize" show-sizer></Page>
           </Col>
        </Row>

         <!-- 添加/修改-对话框 -->
        <Modal
        v-model="modal"
        title="添加图片"
        >       
            <Row>
                <Col span="10" >
                    <Cascader  :data="cityList" @on-change='onchangenewscate' placeholder="请选择分类"></Cascader>
                </Col>
                <Col span="10" offset="4" >
                    <Upload
                        multiple
                        type="drag"
                        name="avatar"
                        :data="uploadcate"
                        :on-success="UploadSuccess"
                        action="http://localhost:3000/upload/uploadData">
                     <div style="margin:7px 0">
                         <Icon type="ios-cloud-upload" size="10" style="color: #3399ff"></Icon>
                         <span>选择文件</span>
                     </div>
                    </Upload>
                </Col>
            </Row>

        <div slot="footer"></div>
        </Modal>
      
    
    </div>
</template>

<script>
  import { Base } from '../../common/Base.js'
    export default {
        mixins:[Base],
        data(){
            return{
                module:'upload',
                ClassiftType:3,
                module:'upload',
                uploadcate:{},
                 columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '上传文件名',
                        key: 'originalname',
                        align: 'center',
                        
                    },
                    {
                        title: '文件类型',
                        key: 'mimetype',
                        align: 'center',
                    },
                    {
                        title: '存储文件名',
                        key: 'filename',
                        align: 'center',
                    },
                    {
                        title: '路径',
                        key: 'path',
                        align: 'center',
                    },
                    {
                        title: '文件大小',
                        key: 'size',
                        align: 'center',
                    },        
                   
                    {
                        title: '操作',
                        key: 'action',
                        width: 70,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [                               
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params);                                        
                                       }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],

            }
            

        },
        methods:{
            UploadSuccess(){
                this.modal=false;
                this.$Message.success('上传成功!');
                this.getListData();
            }
        }
      
    }
</script>